<template>
	<view class="recommend-container">
		<!-- 顶部切换栏 -->
		<view class="tab-header">
			<view 
				class="tab-item"
				@tap="switchTab('all')"
			>
				全部课程
			</view>
			<view 
				class="tab-item" 
				:class="{ active: true }"
			>
				AI推荐课程
			</view>
		</view>
		
		<!-- Loading 状态 -->
		<view class="loading-container" v-if="loading">
			<view class="loading-spinner"></view>
			<text class="loading-text">AI正在为您推荐课程...</text>
		</view>
		
		<!-- 推荐课程列表 -->
		<scroll-view 
			class="course-list" 
			scroll-y 
			v-else
		>
			<view 
				class="course-item" 
				v-for="course in recommendList" 
				:key="course.id"
				@tap="goToCourseDetail(course.id)"
			>
				<image :src="course.image || '/static/course/default.jpg'" mode="aspectFill" class="course-cover"/>
				<view class="course-info">
					<text class="course-name">{{ course.title }}</text>
					<text class="course-desc">{{ course.description }}</text>
				</view>
			</view>
			
			<!-- 空状态提示 -->
			<view class="empty-tip" v-if="recommendList.length === 0">
				暂无推荐课程
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { courseApi } from '@/utils/api'

const recommendList = ref([])
const loading = ref(false)

// 加载推荐课程
const loadRecommendations = async () => {
	loading.value = true
	
	try {
		const res = await courseApi.getRecommendCourses()
		if (res.code === 0 && res.data) {
			recommendList.value = res.data
		}
	} catch (error) {
		console.error('获取推荐失败:', error)
		uni.showToast({
			title: '获取推荐失败',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}

// 切换到全部课程
const switchTab = (tab) => {
	if (tab === 'all') {
		uni.switchTab({
			url: '/pages/course/course'
		})
	}
}

// 跳转到课程详情
const goToCourseDetail = (courseId) => {
	uni.navigateTo({
		url: `/pages/course/detail?id=${courseId}`
	})
}

onMounted(() => {
	loadRecommendations()
})
</script>

<style scoped>
.recommend-container {
	min-height: 100vh;
	background-color: #f6f7f9;
	padding-top: 0rpx; /* 为顶部切换栏留出空间 */
}

.tab-header {
	position: relative;
	top: 0rpx;
	left: 0;
	right: 0;
	display: flex;
	background: #fff;
	padding: 20rpx 30rpx;
	z-index: 100;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.tab-item {
	flex: 1;
	text-align: center;
	font-size: 28rpx;
	color: #666;
	position: relative;
	padding: 20rpx 0;
}

.tab-item.active {
	color: #007AFF;
	font-weight: 500;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background: #007AFF;
	border-radius: 2rpx;
}

/* Loading 样式 */
.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 200rpx 0;
}

.loading-spinner {
	width: 60rpx;
	height: 60rpx;
	border: 4rpx solid #f3f3f3;
	border-top: 4rpx solid #007AFF;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.loading-text {
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #666;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.course-list {
	padding: 20rpx;
}

.course-item {
	background: #fff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.course-cover {
	width: 100%;
	height: 300rpx;
	background-color: #f5f5f5;
}

.course-info {
	padding: 20rpx;
}

.course-name {
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 12rpx;
	display: block;
}

.course-desc {
	font-size: 26rpx;
	color: #666;
	display: block;
	line-height: 1.6;
}

.empty-tip {
	text-align: center;
	padding: 100rpx 0;
	color: #999;
	font-size: 28rpx;
}
</style> 